<template>
    <main>
        <!--{{ this.listed_obj }}-->
        <div class="listed-box">
            <van-row class="listed-list-first full-width92">
                <van-col span="8">
                    <div>{{this.$t('Ckdaima')}}</div>
                </van-col>
                <van-col span="8" class="tc">
                    <div>{{this.$t('Jiage')}}</div>
                </van-col>
                <van-col span="8" class="tr">
                    <div>+/-</div>
                </van-col>
            </van-row>

            <van-list
                v-model="listed_loading"
                :finished="listed_finished"
                finished-text=""  :loading-text="$t('Jiazai')"
                @load="fnLoadListed"
                :immediate-check = "false"
                class="listed-van-list">
                <main class="listed-ul">
                    <van-row v-for="(item, index) in listed_arr" :key="index" class="listed-list full-width92"
                             @click="fnGoMarketInfo(item)">
                        <van-col span="8">
                            <div class="listed-name">{{ item.symbolName }}</div>
                            <span class="bg-theme">{{ item.symbol }}</span>
                        </van-col>
                        <van-col span="8" class="tc">
                            <div class="listed-price" :class="item.regularMarketChangePercent >= 0 ? 'color-green': 'color-red' ">
                                {{ item.bid || 0 }}
                            </div>
                        </van-col>
                        <van-col span="8" class="tr">
                            <div class="color-white type-num" :class=" item.regularMarketChangePercent >= 0 ? 'bg-green': 'bg-red' ">
                                <span v-if="item.regularMarketChangePercent >= 0">+</span>
                                <!--<span v-else>-</span>-->
                                <span>{{ Number(item.regularMarketChangePercent).toFixed(2) || 0 }} %</span>
                            </div>
                        </van-col>
                    </van-row>
                </main>
            </van-list>

        </div>
    </main>
</template>

<script>
import { Qstockservices_sel_api } from "@/assets/js/api";
import market_type from "./market_type";
export default {
    name: "tab1_tai",
    components: {
        market_type,
    },
    props:{
        exchange:{
            type:String,
        }
    },
    data() {
        return {
            /** 上市 + 上櫃*/
            time_interval:"",
            
            listed_loading: false,
            listed_finished: false,
            listed_arr: [],
            listed_obj:{
                exchange:  "hose",  //TAI=上市,TWO=上柜
                sectorId:  "",
                page: 1,
            },
            
        }
    },
    methods: {
        /** 上市 + 上櫃列表*/
        /*分类选择*/
        fnCheckedType(sectorId){
            console.log(sectorId);
            this.listed_obj.page = 1;
            this.listed_obj.sectorId = sectorId;
            this.fnLoadListed()
        },
        
        /*詳情页*/
        fnGoMarketInfo (item){
          this.$emit("fnGoMarketInfo", item);
        },

        /* 上市 + 上櫃列表*/
        fnLoadListed() {
            this.listed_loading = true;
            Qstockservices_sel_api({
                exchange: this.listed_obj.exchange,
                sectorId: this.listed_obj.sectorId,
                page: this.listed_obj.page,
            }).then(res => {
                this.listed_loading = false;
                if(res.code == 200){
                    if (this.listed_obj.page == 1) {
                        this.listed_arr = res.data;
                    } else {
                        this.listed_arr = this.listed_arr.concat(res.data)
                    }
                    this.listed_obj.page++;
                    // 加载状态结束
                    if (res.data.length < 20) {
                        this.listed_finished = true;
                        return
                    }
                } else {
                    this.listed_finished = true;
                }
            })
        },

    },
    created() {
        const tabActive = this.$attrs.tabActive;
         console.log(tabActive);
        let exchange = "hose";
        if( tabActive == 1){
            exchange = "hose";
        }
        if(tabActive == 2){
            exchange = "hnx";
        }
		
		if(tabActive == 5){
		    exchange = "upcom";
		}
        this.listed_obj.exchange = exchange;
    
        this.fnLoadListed();
        this.time_interval = setInterval(()=>{
            // console.log("fnGetIndex");
            this.listed_obj.page--;
            this.fnLoadListed();
        },5000)
    },
    destroyed(){
        clearInterval(this.time_interval);
    },
}
</script>
